<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title>Yahoo Search ExtJS</title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <link type="text/css" rel="stylesheet" href="./ext-2.0/resources/css/ext-all.css"></link>
    <script type="text/javascript" src="./ext-2.0/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="./ext-2.0/ext-all-debug.js"></script>
    <script type="text/javascript" src="./ext-2.0/build/locale/ext-lang-ja.js"></script>
    <script type="text/javascript">
Ext.onReady(function() {

  var store = new Ext.data.Store({
    // JSONP呼び出しを行うProxy
    proxy : new Ext.data.ScriptTagProxy({
      url : 'http://search.yahooapis.com/WebSearchService/V1/webSearch'
    }),
    // JSON形式のデータをレコードに変換する
    reader : new Ext.data.JsonReader({
      root : 'ResultSet.Result', // レコードとして取得する配列データへのパス
      totalProperty : 'ResultSet.totalResultsAvailable', // 全体のレコード数を示すプロパティへのパス
      fields : [ 'Title', 'Summary', 'Url' ] // レコードのフィールドとして取得するプロパティ
    }),
    baseParams : { output : 'json', appid : 'YahooDemo' } // Proxyに渡すパラメータ
  });

  // 検索入力ボックス
  var searchField = new Ext.form.TextField();

  // キーワード検索を実行する関数
  function search() {
    // storeの基本パラメータに検索キーワードを設定
    store.baseParams.query = searchField.getValue();
    // データの読み込み
    store.load({ params : { start : 0, results : 10 }});
  }

  // Gridのボトムツールバーに表示するページングツールバー
  var paging = new Ext.PagingToolbar({
    store : store,
    displayInfo : true,
    pageSize : 10
  });
  paging.paramNames.limit = 'results'; // ページングためのパラメータ名の指定
 
  var grid = new Ext.grid.GridPanel({
    store : store, // グリッドに表示するデータのstore
    columns : [    // グリッドに表示するカラム
      { header : 'Title', dataIndex : 'Title' }, // header:ヘッダ名, dataIndex:レコードのフィールド名
      { header : 'Url', dataIndex : 'Url' },
      { header : 'Summary', dataIndex : 'Summary' }
    ],
    loadMask : true, // 検索中にロードメッセージを表示
    viewConfig : {
      forceFit : true // 自動的にカラムサイズを調整
    },
    selModel : new Ext.grid.RowSelectionModel({
      singleSelection : true  // 一行のみ選択可能に
    }),
    tbar : [ searchField, { text : 'Search', handler : search } ], // 検索ツールバー
    bbar : paging // ページングツールバー
  })

  // 行選択のイベントをハンドルする関数を設定
  grid.getSelectionModel().on('rowselect', function(selModel, index, record) {
    var tabpanel = Ext.getCmp('previewTabPanel'); // id:previewTabPanelのコンポーネントを取得
    var tab = tabpanel.add({
      closable : true, // タブのクローズ可能
      title : record.data.Title, // タブのタイトル
      html : '<iframe src="'+record.data.Url+'" width="100%" height="100%" frameborder="0" ></iframe>'
    })
    if (tab) tabpanel.setActiveTab(tab); // 追加したタブをアクティブ化
  });

  var viewport = new Ext.Viewport({
    layout : 'border',       // Ext.layout.BorderLayoutを利用
    items : [{
      id : 'searchArea',
      title : 'Yahoo Search',
      region : 'north',      // 画面上方(north)に配置
      height : 300,          // 領域の初期の高さ
      split : true,          // Split Barをつけて領域のサイズを変更可能にする
      collapsible : true,    // 領域を折りたたみ可能に
      layout : 'fit',
      defaults : { border : false },
      items : grid           // Gridを中身に表示
    }, { 
      id : 'previewTabPanel', 
      xtype : 'tabpanel',    // Ext.TabPanelを設置
      region : 'center',     // 画面中央(center)に配置
      resizeTabs : true,     // タブのリサイズを許可
      enableTabScrall : true // 表示するタブが多くなったときにタブのスクロールを許可
    }]
  });

  // ロード後、フォーカスを検索入力ボックスに設定する
  searchField.focus();

})
    </script>
  </head>
  <body></body>
</html>

